<template>
	<view>
		<view class="message-list" v-for="(info, index) in infos" :key="index">
			<view class="title">{{info.title}}<text>{{info.create_date}}</text></view>
			<view class="sponsor">发起人:{{info.sponsor}}</view>
			<view class="context">
				<view class="text">{{info.context}}</view>
				<view class="button">
					<button type="primary" v-if="info.type==='log'" @click="writeDiary(info.res_id,info.id,info.is_read)">写日志</button>
					<button type="primary" v-else @click="changeReadState(info.res_id,info.type,info.id,info.is_read)">查看详情</button>
					<button type="primary" v-if="info.type==='log'&&info.is_read===true" @click="readDiary(info.res_id)">查看日志</button>
				</view>
			</view>
		</view>
		<view v-if="infos.length === 0" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text> 暂 无 数 据 . . . </text>
		</view>
		<uni-load-more v-else :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return { // 不能在return 直接获取全局变量
				infos: [], //列表数据
				formData: {
					user_id: null, //用户id
					// read_key: '1', //'1': 已读；'0'：未读(默认是已读)
					page_no: 1,
					page_size: 10
				},
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				taskTypeData: '0' //'0'是未读，‘1’是已读
			}
		},
		props: {
			taskType: {
				default: '0', //'0'是未读，‘1’是已读
				type: String
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.formData.page_no++
			this.loadingType = 1
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/app_message_list',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: {
					read_key: this.taskTypeData,
					...this.formData,
				},
				success: res => {
					this.infos.push(...res.data.data.list)
					if (res.data.data.list.length < this.formData.page_size) {
						this.loadingType = 2
					} else {
						this.loadingType = 0
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		onLoad() {
			this.getListData()
			this.taskTypeData = this.$props.taskType
			this.$eventBus.$on("constructionLogEditExecute", () => {
				this.getListData()
			})
		},
		methods: {
			//接收父组件的tab切换
			setTaskType(val) {
				if (val !== this.taskTypeData) {
					this.formData.page_no = 1
					this.taskTypeData = val
					this.getListData()
				}
			},
			//获取列表数据（根据taskType:'1'已读，'0'未读）
			getListData() {
				this.formData.user_id = this.$store.state.uid // 解决用户重新登入后，不会再重新刷新页面，导致uid相同 
				uni.showLoading({
					title: '',
					mask: false
				});
				this.$request({
					url: this.$store.state.baseUrl + '/lwj/app_message_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						read_key: this.taskTypeData,
						...this.formData,
					},
					success: res => {
						this.infos = res.data.data.list
						if (this.taskTypeData === '0') {
							this.nums = res.data.data.total_num //设置未读消息有几条
						}
						if (res.data.data.list.length < this.formData.page_size) {
							this.loadingType = 2
						} else {
							this.loadingType = 0
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//点击查看详情
			changeReadState(res_id, type, id, is_read) {
				if (!is_read) { //是未读的信息，才进行已读处理
					this.readed(id)
				}
				if (type === 'comment') { //跳到任务列表里面的评论页面
					uni.navigateTo({
						// url: '../myProject/projectDetail/taskComment?id=' + res_id ,
						url: `../../pagesProjectDetail/myProject/projectDetail/taskComment?comment_id=${res_id}`,
						success: res => {},
						fail: () => {},
						complete: () => {}
					})
				} else if (type === 'order') { //订单相关(催单)跳到材料列表页面
					uni.navigateTo({
						url: '../../pagesProjectDetail/myProject/projectDetail/materialList?id=' + res_id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			//点击写日志按钮
			writeDiary(res_id, id, is_read) {
				if (!is_read) { //是未读的信息，才进行已读处理
					this.readed(id)
				}
				const currentDate = new Date()
				let strDate = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()}`
				uni.navigateTo({
					url: '../../pagesChild/myProject/projectDetail/constructionLogEdit?hard_id=' + res_id + '&date=' + strDate,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//查看日志页面
			readDiary(res_id) {
				uni.navigateTo({
					url: '../../pagesChild/myProject/projectDetail/constructionLog?id=' + res_id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//标记已读
			readed(id) {
				//给底部tab修改未读数据
				this.nums = this.nums - 1
				if (this.nums > 0) {
					uni.setTabBarBadge({
						index: 1,
						text: this.nums + ''
					})
				} else {
					uni.removeTabBarBadge({
						index: 1
					})
				}
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_message_read',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						user_id: this.formData.user_id,
						message_id: parseInt(id),
						read_status: true
					},
					success: res => {
						//如果已读成功，就播报事件，消息列表要刷新
						if (res.data.code === 1) {
							this.getListData() //当前页面列表更新
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style scoped>
	.message-list {
		background: #FFFFFF;
		padding: 10upx;
		margin-bottom: 5upx;
	}

	.message-list view {
		padding: 5upx 0 5upx 0;
	}

	.title {
		color: #007aff;
	}

	.title text {
		color: #B2B2B2;
		float: right;
	}

	.sponsor {
		color: #B2B2B2;
	}

	.context {
		display: flex;
		flex-direction: row;
	}

	.context .text {
		flex: 2;
	}

	.content .button {
		position: relative;
		width: 160upx;
	}

	.content .button button {
		font-size: 24upx;
		position: absolute;
		bottom: 0;
		z-index: 0;
	}
</style>
